<!--
 * @Description: 壁纸组件
 * @Author: @晏长刚
 * @Date: 2025-02-17 15:54:23
 * @LastEditors: @晏长刚
 * @LastEditTime: 2025-03-29 17:17:24
 * @FilePath: /wht-mall-2.0-uniapp/components/Wallpaper/index.vue
-->

<template>
	<view :style="{width:width,height:height,borderRadius:radius}" class="wallpaper-widget">
		<image :src="imgSrc" :mode="mode" style="width:100%;height: 100%;" @error="imgErr"></image>
		<view class="err-img-div" v-if="errSrc =='' && isErrImg">
			<image src="/static/page/tpjzsp.png" mode="widthFix" style="width: 30%;"></image>
			<view class="err-txt">加载失败</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			width: { //宽度
				type: String,
				default: '100%'
			},
			height: { //高度
				type: String,
				default: '100%'
			},
			radius: { //圆角
				type: String,
				default: ''
			},
			src: { //图片链接
				type: String,
				default: ''
			},
			errSrc: { //错误图片链接返回
				type: String,
				default: ''
			},
			mode: { //图片显示模式
				type: String,
				default: 'aspectFill'
			}
		},
		data() {
			return {
				imgSrc: '', //图片链接
				isErrImg: false, //是否显示错误图片
			}
		},
		components: {},
		computed: {},
		watch: {
			src(val) {
				if (val == '' || val == null || val == 'undefined' || val == 'null' || this.imgSrc == null) {
					this.imgSrc = this.errSrc;
					this.isErrImg = true;
				} else {
					this.imgSrc = val;
					this.isErrImg = false;
				}
			}
		},
		mounted() {
			this.imgSrc = this.src;
			if (this.imgSrc == '' || this.imgSrc == null || this.imgSrc == 'undefined' || this.imgSrc == 'null' || this
				.imgSrc == null) {
				this.imgSrc = this.errSrc;
				this.isErrImg = true;
			} else {
				// this.imgSrc = val;
				this.isErrImg = false;
			}
		},
		methods: {
			/**
			 * @description: 图片链接错误时
			 * @return viod
			 */
			imgErr() {
				if (this.errSrc == '') {
					this.isErrImg = true;
				} else {
					this.imgSrc = this.errSrc;
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.wallpaper-widget {
		position: relative;
		overflow: hidden;

		.err-img-div {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background-color: #F8F9FA;
		}

		.err-txt {
			padding-top: 10rpx;
			font-size: 22rpx;
			color: #999999;
		}
	}
</style>